import React, {Component} from 'react';
import Loginparticles from './loginparticles'
import '../assets/css/all.css'
import {Form, Input, Button, message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux';
import {setUserInfo} from '../redux/actions/login_action';
import checkLogin from './check_login'

const {Item} = Form;

@connect(
    state => ({userInfo:state.userInfo}),
    {setUserInfo}
    )
@checkLogin
class Login extends Component {
    onFinish = values => {
        let obj = {
            password: values.password,
            username: values.username
        };
        this.$axios.post("/admin/login", obj)
            .then(result => {
                let data = result.data.data;
                if (result.data.state.type === "SUCCESS") {
                    message.success("登录成功");
                    this.props.setUserInfo(data);
                    this.props.history.replace('/');
                } else message.error("用户名或密码错误");
            }).catch(e => {
            message.error(e);
        });
    };
    render() {
        return (
            <div>
                <Loginparticles/>
                <div className="login-box">
                    <p className="title">“成大通”后台管理系统</p>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                    >
                        <Item
                            name="username"
                            initialValue='admin'
                            rules={[{ required: true, message: 'Please input your Username!' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Item>
                        <Item
                            name="password"
                            initialValue='admin'
                            rules={[{ required: true, message: 'Please input your Password!' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Item>

                        <Item>
                            <Button htmlType="submit" className="login-form-button submit-btn">
                                立即登录
                            </Button>
                        </Item>
                    </Form>
                </div>
            </div>
        );
    }
}
export default Login